<template>
	<div class="Guide">
		<Header active="5" />
		<!-- banner -->
		<div class="page_banner" :style="'background-image:url(' + cateInfo.image + ')'">
		    <div class="page-inner">
		        <h1 class="f60 font-b">{{cateInfo.name}}</h1>
		    </div>
		</div>
		<!-- tabs -->
		<Tabs :tabsList="navList" />
		<!-- inner -->
		<div class="page-inner page-padding wrap">
			<div class="tab_box">
				<div class="left_tabs" v-for="(i, index) in SectionList" :key="index">
					<div class="tab_top f16 font-m">{{ i.name }}</div>
					<div :class="`tab_inner font-l f16 flex ${
              tabsAct == j.id ? 'tabs_active' : ''
            }`" v-for="(j, ind) in i.data" :key="ind" @click="SectionTabs(j)">
						<p class="dot">{{ j.title || j.name }}</p>
						<div class="right_icon">
							<i></i>
						</div>
					</div>
				</div>
			</div>
			<div class="content_box">
				<Section3-1 v-if="tabsAct==1466" />
				<div v-else>
					
					<div class="Section">
					  <h1 class="font-m f36">{{infoContent.cname}}</h1>
					  <p class="f20 font-m">{{infoContent.title}}</p>
					  
					 <div v-html="infoContent.content"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import {
		getCloumnList,
		getArticleLists,getCategoryList
	} from '@/api/sections'
	export default {
		props: ['active'],

		data() {
			return {
				total: 0,
				tabsAct: '',
				SectionList: [],
				dataList: [],
				navList: [],
				infoContent:{},
				cateInfo:{},
			}
		},
		mounted() {

		getCategoryList({'cid':1439}).then((res)=>{
			console.log(res,1111)
			  this.cateInfo=res.data
		
		})
			getCloumnList({
				'id': 1439
			}).then((res) => {
				this.navList = res.data

			})
			getCloumnList({
				'id': 1441
			}).then((res) => {


				this.SectionList = res.data
				this.SectionList.some((item, index) => {
					if (item.id == 1444) {

						getCloumnList({
							id: 1444
						}).then((res1) => {
							item.data = res1.data
							if (index == 0) {
								this.tabsAct = item.data[0].id
							}
						})
					} else {

						getArticleLists({

							page: 1,
							'cid': item.id,
							ext: 'content,text1,link1',
							limit: 20
						}).then((res2) => {
							console.log(res2, 321)
							item.data = res2.data.data
							if (index == 0) {
								this.tabsAct = item.data[0].id
								this.infoContent = item.data[0]
							}

						})
					}
				})

			})

		},
		methods: {
			SectionTabs(item) {
				this.tabsAct = item.id;
				this.infoContent=item
				const anchor = document.getElementById('section');
				if (anchor) {
					window.scrollTo({
						top: anchor.offsetTop - 100,
						behavior: 'smooth', // 启用平滑滚动  
					});
				}
			},
		}
	}
</script>